<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'

	// 奖品图片
	const img = ref()
	// 入库数量
	const num = ref()
	// 裸卡数量
	const lkNum = ref()
	// 评级卡数量
	const pjkNum = ref()
	// 原盒数量
	const yhNum = ref()
	//快递单号
	const expressSn = ref()

	//七牛token
	const avatarToken = ref('')
	const url = ref()
	async function getPicToken() {
		const res = await http.request({
			url: '/api/config/qiUpload',
			method: 'POST',
			data: {},
		})
		console.log(res)
		if (res.st == 1) {
			avatarToken.value = res.data.uptoken
			url.value = res.data.domain
		}
	}

	//选取组合图片
	function chooseGroupImg() {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// sourceType: ['album'], //从相册选择
			success: (ava) => {
				console.log(ava.tempFilePaths)
				//将头像保存到后端
				uni.uploadFile({
					url: 'https://upload-z0.qiniup.com/',
					filePath: ava.tempFilePaths[0], //头像文件
					header: {},
					formData: {
						token: avatarToken.value,
					},
					name: 'file',
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data)
						img.value =
							url.value + JSON.parse(uploadFileRes.data).key
					},
				})
			},
		})
	}

	// 在方法中调用复制到剪贴板的操作
	function copyTextToClipboard(text) {
		uni.setClipboardData({
			data: text,
			success: function () {
				// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
				uni.utils.toast('复制成功')
			},
		})
	}

	const agree = ref(true)

	async function goWareHouse() {
		if (!num.value) {
			uni.utils.toast('请填写入库数量')
			return
		}
		if (num.value != Math.floor(num.value)) {
			uni.utils.toast('入库数量只能为整数')
			return
		}
		if (!img.value) {
			uni.utils.toast('请上传商品组合图片')
			return
		}
		if (!lkNum.value) {
			uni.utils.toast('请填写裸卡数量')
			return
		}
		if (lkNum.value != Math.floor(lkNum.value)) {
			uni.utils.toast('裸卡数量只能为整数')
			return
		}
		if (!pjkNum.value) {
			uni.utils.toast('请填写评级卡数量')
			return
		}
		if (pjkNum.value != Math.floor(pjkNum.value)) {
			uni.utils.toast('评级卡数量只能为整数')
			return
		}
		if (!yhNum.value) {
			uni.utils.toast('请填写原盒数量')
			return
		}
		if (yhNum.value != Math.floor(yhNum.value)) {
			uni.utils.toast('原盒数量只能为整数')
			return
		}
		if (!expressSn.value) {
			uni.utils.toast('请填写快递单号')
			return
		}
		if (!agree.value) {
			uni.utils.toast('请同意协议')
			return
		}
		const res = await http.request({
			url: '/api/shop/applyGoods',
			method: 'POST',
			data: {
				img: img.value,
				num: num.value,
				lk_num: lkNum.value,
				pjk_num: pjkNum.value,
				yh_num: yhNum.value,
				express_sn: expressSn.value,
			},
		})
		console.log(res)
		if (res.st == 1) {
			uni.utils.toast('入库成功，即将返回商家中心')
			setTimeout(() => {
				uni.navigateBack({
					delta: 1, // 默认值是1，表示返回的页面层数
				})
			}, 2000)
		} else {
			uni.utils.toast(res.msg)
		}
	}
	onLoad(() => {
		getPicToken()
	})
</script>

<template>
	<view class="add-content">
		<view class="add-top">
			<view class="form-item">
				<view class="title"> 申请入库数量 </view>
				<input
					class="input topinput"
					type="number"
					v-model="num"
					style=""
				/>
			</view>
			<!-- <view class="form-item">
				<view class="title"> 商家代码 </view>
				<view
					class=""
					style="font-size: 24rpx; color: #a6a6a6; margin-left: 32rpx"
				>
					12345678910
				</view>
			</view> -->
			<view class="" style="display: flex; align-items: center">
				<view class="">
					<view class="form-item">
						<view class="title"> 裸卡数量 </view>
						<input
							class="input"
							type="number"
							v-model="lkNum"
							style=""
						/>
					</view>

					<view class="form-item">
						<view class="title"> 评级卡数量 </view>
						<input
							class="input"
							type="number"
							v-model="pjkNum"
							style=""
						/>
					</view>

					<view class="form-item">
						<view class="title"> 原盒数量 </view>
						<input
							class="input"
							type="number"
							v-model="yhNum"
							style=""
						/>
					</view>
				</view>
				<view class="">
					<view
						class="goods-group"
						style="margin-left: 60rpx; overflow: hidden"
						@click="chooseGroupImg"
					>
						<image
							:src="img"
							mode=""
							style="width: 100%; height: 100%"
							v-if="img"
						></image>
						<view
							v-else
							class=""
							style="font-size: 28rpx; color: #a6a6a6"
						>
							+上传奖品合照
						</view>
					</view>
				</view>
			</view>
			<view class="tip">
				目前仅支持宝可梦品类裸卡(流通品相以上)、评级卡的寄售入库，单个商家入库数量上限暂为<span
					style="color: #a378ff"
					>50件</span
				>，单件价值不高于<span style="color: #a378ff">5000元</span
				>，更多品类及原盒入库待开放。
			</view>
		</view>
		<view class="add-bottom">
			<view class="form-item">
				<view class="title"> 填写顺丰单号 </view>
				<input
					class="bottominput"
					v-model="expressSn"
					placeholder="请输入快递单号"
					style=""
				/>
			</view>
			<view class="form-item">
				<view class="title"> 申请入库地址 </view>
				<view
					class=""
					style="
						margin-left: 10rpx;
						font-size: 24rpx;
						line-height: 42rpx;
						color: #808080;
					"
				>
					<view class=""> 卡牌大师 </view>
					<view class=""> 15161522229 </view>
					<view class=""> 江苏省无锡市锡山区东亭街道锡东八佰伴 </view>
				</view>
				<view
					class="copy-button"
					@click="
						copyTextToClipboard(
							'卡牌大师15161522229江苏省无锡市锡山区东亭街道锡东八佰伴'
						)
					"
				>
					复制
				</view>
			</view>
			<view class="" style="font-size: 24rpx; color: #a6a6a6">
				<radio
					color="#BCA4ED"
					:checked="agree"
					style="transform: scale(0.6)"
					@click="agree = !agree"
				/>
				已同意：请商家<span style="color: #a378ff">勿寄顺丰到付</span
				>，并注意合理打包，入库前将检查卡况盒况并做标注品相未符合基本要求(流通品相且无损)则顺丰到付退回。
			</view>
		</view>
		<view class="bottom-button">
			<view class="button" @click="goWareHouse"> </view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.add-content {
		padding: 13rpx;
		.title {
			flex-shrink: 0;
			width: 180rpx;
			font-size: 30rpx;
		}
		.input {
			width: 153rpx;
			height: 62rpx;
			box-sizing: border-box;
			margin-left: 32rpx;
			border-radius: 14rpx;
			background-color: #e9eaf2;
			font-size: 28rpx;
			text-align: center;
			color: #af8ef5;
		}
		.form-item {
			display: flex;
			align-items: center;
			margin-bottom: 44rpx;
		}
		.add-top {
			height: 756rpx;
			padding: 36rpx 25rpx;
			margin-bottom: 13rpx;
			box-sizing: border-box;
			border-radius: 14rpx;
			background-color: #fff;
			.topinput {
				width: 218rpx;
			}
			.goods-group {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 258rpx;
				height: 342rpx;
				border-radius: 14rpx;
				background-color: rgb(233, 234, 242, 0.5);
			}
			.tip {
				margin-top: 55rpx;
				font-size: 24rpx;
				color: rgb(166, 166, 166);
			}
		}
		.add-bottom {
			height: 650rpx;
			padding: 39rpx 30rpx;
			border-radius: 14rpx;
			background-color: #fff;
			.bottominput {
				width: 70%;
				height: 62rpx;
				box-sizing: border-box;
				margin-left: 10rpx;
				padding-left: 20rpx;
				border-radius: 14rpx;
				background-color: #e9eaf2;
				font-size: 28rpx;
				color: #af8ef5;
			}
			.copy-button {
				width: 96rpx;
				height: 48rpx;
				margin-left: 40rpx;
				background-color: #a175ff;
				border-radius: 16rpx;
				font-size: 26rpx;
				text-align: center;
				line-height: 48rpx;
				color: #fff;
			}
		}
		.bottom-button {
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.button {
				width: 638rpx;
				height: 92rpx;
				background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/warehouse.png)
					no-repeat;
				background-size: 100% 100%;
			}
		}
	}
</style>
